<template>
	<view class="content">
		<view class="type">
			<view class="title">
				<text>选类型</text>
			</view>
			<view class="cl">
				<view :class="['item',xzIndex==index?'selected':'']" v-for="(item,index) in carTyeList" @tap="changeType(index)">
					<image :src="domain()+item.zsimage" mode="widthFix"></image>
					<view class="name">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="xc">
			<view class="title">
				<text class="text1">选车厢长(米)</text>
				<text class="text2">可载货部分的长度，不包含车头</text>
			</view>
			<view class="title2">
				<text>若实际测量长度值不在下表中，请选择略小一点的值</text>
			</view>
			<view class="cd">
				<text :class="['item',cdIndex==index?'selected':'']" v-for="(item,index) in carLengthList" @tap="changeCd(index)">{{item.name}}</text>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="bottom">
			<view class="btn" @tap="goNext('/pages/my/info?city='+city)">
				<text>确定{{carLengthList[cdIndex].name || ''}}车厢长{{carTyeList[xzIndex].name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/common/request";
  import {domain} from "@/common/api";

  export default {
		data() {
			return {
				xzIndex: 0,
        carTyeList:[],//车辆类型
        carLengthList:[],//车辆长度
				cdIndex: 0,
        city:'',//选择的城市
			}
		},
    onLoad(query) {
      this.city = query.city;
      this.getCarType();
      this.getCarLength();
    },
		methods: {
      domain() {
        return domain
      },
      //获取香肠
      getCarLength(){
        request({
          url:'/d/car/xcList',
        }).then(res=>{
          console.log(res)
          this.carLengthList = res.data;
        })
      },
      //获取车辆类型
      getCarType(){
        request({
          url:'/d/car/typeList',
        }).then(res=>{
          console.log(res)
          this.carTyeList = res.data;
        })
      },
			//切换类型
			changeType(index){
				if(this.xzIndex==index) return
				this.xzIndex = index
			},
			//切换车厢长
			changeCd(index){
				if(this.cdIndex==index) return
				this.cdIndex = index
			},
			//跳转
			goNext(url){
        uni.setStorageSync('car',{
          typeId:this.carTyeList[this.xzIndex].id,
          city:this.city,
          typeName:this.carTyeList[this.xzIndex].name,
          xcId:this.carLengthList[this.cdIndex].id,
        })
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 40rpx 30rpx;
		.type{
			.title{
				line-height: 50rpx;
				font-size: $uni-font-size-lg;
				font-weight: bold;
			}
			.cl{
				margin-top: 30rpx;
				display: flex;
				flex-wrap: wrap;
				.item{
					width: 150rpx;
					height: 150rpx;
					margin: 0 10rpx 20rpx;
					border-radius: 20rpx;
					background-color: #F3F5F7;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					image{
						width: 120rpx;
					}
					.name{
						margin-top: 10rpx;
						line-height: 40rpx;
						font-size: $uni-font-size-sm;
						font-weight: 500;
					}
				}
				.selected{
					background-color: #F5F0FF;
					color: #735DBC;
					border: 1rpx solid #735DBC;
				}
			}
		}
		.xc{
			margin-top: 30rpx;
			.title{
				line-height: 50rpx;
				.text1{
					font-size: $uni-font-size-lg;
					font-weight: bold;
				}
				.text2{
					margin-left: 15rpx;
					display: inline-block;
					background-color: #FFEBEB;
					padding: 5rpx 15rpx;
					line-height: 40rpx;
					color: #E26464;
				}
			}
			.title2{
				margin-top: 15rpx;
				line-height: 40rpx;
				color: #A1A1A1;
			}
			.cd{
				margin-top: 30rpx;
				.item{
					display: inline-block;
					width: 110rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					background-color: #F3F5F7;
					border-radius: 10rpx;
					margin: 0 10rpx 20rpx;
				}
				.selected{
					background-color: #F5F0FF;
					color: #8467F0;
					border: 1rpx solid #8467F0;
				}
			}
		}
		.bottom{
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 180rpx;
			background-color: #fff;
			border-top: 1rpx solid #E7E1F7;
			.btn{
				margin: 20rpx auto 0;
				width: 630rpx;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 20rpx;
				text-align: center;
				background-color: #895FFF;
				font-size: $uni-font-size-lg;
				font-weight: bold;
				letter-spacing: 2rpx;
				color: #fff;
			}
		}
	}
</style>
